<template>
  <div class="statData">
    <div class="overview">
      <p class="titleBox">数据概况</p>
      <div class="dataTime">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']">
        </el-date-picker>
      </div>
      
    </div>
    <div class="overall">
      <p class="titleBox">整体情况</p>
      <div class="allmain">
        <div>
          <p class="text">实收金额</p>
          <p class="title">180.0</p>
        </div>
        <div>
          <p class="text">浏览量</p>
          <p class="title">1800</p>
        </div>
        <div>
          <p class="text">访问支付转化率</p>
          <p class="title">48%</p>
        </div>
        <div>
          <p class="text">客单价</p>
          <p class="title">60</p>
        </div>
        <div>
          <p class="text">支付单数</p>
          <p class="title">50</p>
        </div>
        <div>
          <p class="text">支付人数</p>
          <p class="title">0</p>
        </div>
        <div>
          <p class="text">富购客户数</p>
          <p class="title">180</p>
        </div>
        <div>
          <p class="text">访客数</p>
          <p class="title">48</p>
        </div>
        <div>
          <p class="text">售后成功金额</p>
          <p class="title">60</p>
        </div>
        <div>
          <p class="text">新增客户数</p>
          <p class="title">50</p>
        </div>
      </div>
    </div>
    <div class="goodsBox">
      <div class="goodsleft">
        <p class="titleBox">商品浏览TOP10</p>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'color':'#3D3D3D','font-size':'16px','height':'60px','font-weight':'400','background-color':'#fff','border-bottom':'none'}">
          <el-table-column prop="num" label="序号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="image" label="商品图片" align="center" main-width="35%">
            <!-- <template slot-scope="scope"> -->
              <img src="../../assets/img/a.jpg" alt="" style="width:60px;height:60px;">
            <!-- </template> -->
          </el-table-column>
          <el-table-column prop="" label="商品名称" main-width="20%" align="center">
            <template slot-scope="scope">
              <div class="goods_name" style="text-align:left">{{scope.row.goods_name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Views" label="浏览量" align="center" width="220">
          </el-table-column>
        </el-table>
      </div>
      <div class="goodsright">
        <p class="titleBox">商品销量TOP10</p>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'color':'#3D3D3D','font-size':'16px','height':'60px','font-weight':'400','background-color':'#fff','border-bottom':'none'}">
          <el-table-column prop="num" label="序号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="image" label="商品图片" align="center" main-width="35%">
            <!-- <template slot-scope="scope"> -->
              <img src="../../assets/img/a.jpg" alt="" style="width:60px;height:60px;">
            <!-- </template> -->
          </el-table-column>
          <el-table-column prop="" label="商品名称" main-width="20%" align="center">
            <template slot-scope="scope">
              <div class="goods_name" style="text-align:left">{{scope.row.goods_name}}</div>
            </template>

          </el-table-column>
          <el-table-column prop="Views" label="浏览量" align="center" width="220">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- goodsBox -->
  </div>
</template>
<script>
export default {
  data(){
    return{
      value1: '',
      tableData:[{
        num:1,
        goods_name:'六福珠宝足金DIY刻字片挂饰黄金项链吊坠手链挂饰计价',
        Views:'2909'
      },{
        num:2,
        goods_name:'天翼小白49元纯流量卡（随机选号 只发辽宁）60元含100元资费',
        Views:'1223'
      },{
        num:3,
        goods_name:'小米手机5,十余项黑科技，很轻狠快',
        Views:'1122'
      },{
        num:4,
        goods_name:'六福珠宝足金DIY刻字片挂饰黄金项链吊坠手链挂饰计价',
        Views:'998'
      },{
        num:5,
        goods_name:'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机',
        Views:'760'
      },]
    }
  }
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.statData {
  width: 99.2%;
}
.overview,
.overall {
  width: 100%;
  padding: 0 20px;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.allmain {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 25px 0;
}
.allmain div {
  width: 20%;
  text-align: center;
  margin-bottom: 25px;
}
.allmain .text {
  color: #707070;
  font-size: 14px;
}
.allmain .title {
  color: #1d1d1d;
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
}
.titleBox {
  color: #5b5b5b;
  font-size: 16px;
  line-height: 50px;
  border-bottom: 1px solid #f2f2f6;
}
.goodsBox {
  display: flex;
  justify-content: space-between;
  padding-bottom:30px;
}
.goodsleft {
  padding: 0 20px;
  width: 49.9%;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
}
.goods_name{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goodsright {
  padding: 0 20px;
  width: 49%;
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
}
.statData /deep/ .el-table--small .el-table__cell{padding:0.5px 0;}
.statData /deep/ .el-table .cell{font-size:0.875rem}
.statData /deep/ .el-table th.el-table__cell>.cell{font-size:15px}
.statData /deep/ .el-image__inner{width: auto !important;height:95%;}
.statData /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{background-color: #fff;}
.dataTime{
  padding:20px 0;
}
</style>